<template>
  <div class="main-content-container">
    <!-- 资料---物品 -->
    <div ref="search" class="app-search">
      <el-row>
        <!-- <el-col :span="4">
        <el-select v-model="value" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-col> -->
        <el-col :span="24" align="right" class="addBtnStyle">
          <el-button @click.native="handleAdd(true)">
            +增加物品
          </el-button>
        </el-col>
      </el-row>
    <!-- <el-row style="margin-top:20px">
      <el-col :span="6">
        <el-input v-model="name" style="width:50%" placeholder="姓名.手机号.会员号" class="input-with-select" />
        <el-button @click="searchCustomer()">搜索顾客</el-button>
        <el-button type="text" @click="clean()">清除</el-button>
      </el-col>
    </el-row> -->
    </div>
    <div class="box-show marginTop" :style="'height:'+ (innerHeight + 80) + 'px'">
      <el-table v-loading="loading" :data="list" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column prop="no" label="编号" :show-overflow-tooltip="true" />
        <el-table-column prop="name" label="名称" :show-overflow-tooltip="true" />
        <el-table-column prop="productClassificationName" label="所属分类" :show-overflow-tooltip="true" />
        <el-table-column prop="spec" label="规格" :show-overflow-tooltip="true" />
        <el-table-column prop="unit" label="单位" :show-overflow-tooltip="true" />
        <el-table-column prop="sellPrice" label="物品售价" :show-overflow-tooltip="true" />
        <el-table-column prop="status" label="状态" :show-overflow-tooltip="true" />
        <el-table-column label="操作" :show-overflow-tooltip="true">
          <template slot-scope="{ row }">
            <!-- <el-button type="text" size="small">查看</el-button> -->
            <el-button type="text" size="small" @click.native="handleAdd(true,row)">编辑</el-button>
            <el-button type="text" @click.native="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="queryParams.page" :page-size="queryParams.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <Dialog :title="title" :visible="visible" class="two-columns" button-text="保存" @confirm="submitForm" @close="handleAdd(false)">
      <AddDrugs v-if="visible" ref="addDrugs" :row="currentRow" @success="handleSuccess()" />
    </Dialog>
  </div>
</template>
<script>
// import { Table } from '@rabbit.do/rabbit';
import Dialog from '@/components/Dialog';
import { tableColor, labelHeigh } from '@/utils/common.js';
import AddDrugs from './addDrugs';
export default {
  components: {
    // Table,
    AddDrugs,
    Dialog,
  },
  data() {
    return {
      title: '增加物品',
      visible: false,
      reveal: false,
      search: {
        type: "物品",
      },
      buttonLoading: false,
      currentRow: {},
      options: [{
        value: '选项1',
        label: '黄金糕',
      }],
      value: '',
      input3: '',
      list: [],
      tableColor,
      innerHeight: null,
      queryParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      loading: false,
      name: "",
    };
  },
  mounted() {
    // this.$api['data/drugs/drugsList']({
    //     ...this.queryParams
    //   }).then(res => {
    //     if (res.code !== 200) return;
    //     this.list=res.data.result
    //     console.log(res,"这里是会请求下来的结果")
    //   });
    this.getList();
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  methods: {
    handleAdd(bool, row) {
      this.visible = bool;
      this.currentRow = {};
      if (row) this.currentRow = JSON.parse(JSON.stringify((row)));
      if (this.currentRow.productClassificationId) {
        this.currentRow.productClassification = this.currentRow.allProductClassificationId.split(",");
      }
    },
    async handleDelete(row) {
      const confirmResult = await this.$confirm('请确认是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除');
      }
      this.$api['data/goods/delete']({ id: row.id, type: "物品" }).then(res => {
        if (res.code !== 200) return;
        this.msgSuccess('删除成功');
        this.getList();
      });
      // this.buttonLoading = true;
      // this.$api['data/goods/delete']({ id: row.id, type: "物品" }).then(res => {
      //   if (res.code !== 200) return;
      //   this.msgSuccess('删除成功');
      //   this.getList();
      // }).finally(() => (this.buttonLoading = false));
    },
    handlePaginationChange(pagination) {
      this.queryParams = { page: pagination.pageNum, pageSize: pagination.pageSize };
      this.getList();
    },
    getList() {
      this.loading = true;
      this.$api['data/drugs/drugsListPage']({
        ...this.queryParams,
        query: this.search,
      }).then(res => {
        if (res.code !== 200) return;
        this.list = res.data.result;
        this.total = res.data.total;
      }).finally(() => (this.loading = false));
    },
    handleSuccess() {
      this.visible = false;
      this.getList();
    },
    clean() {
      this.name = '';
    },
    searchCustomer() {
      const json = {};
      if (!this.name) return false;
      if (this.name.length < 10) {
        json.customerName = this.name;
      } else if (this.name.length === 11) {
        const res = /^1\d{10}$/;
        if (res.test(this.name)) {
          json.customerPhone = this.name;
        } else {
          this.$message.error("请输入正确得手机号码");
        }
      } else {
        json.customerCode = this.name;
      }
      Object.assign(this.search, json);
      this.getList();
    },
    submitForm() {
      this.$refs.addDrugs.submitForm();
    },
  },
};
</script>
